import React, { memo } from "react"
import { PaginationWrapper } from "./style"
import { Pagination } from "antd"
import { shallowEqual, useDispatch, useSelector } from "react-redux"
import { fetchRoomListAction } from "@/store/modules/entire/actionCreators"

const EntirePagination = memo((props) => {
    const dispatch = useDispatch()
    const { currentPage, totalCount } = useSelector(
        (state) => ({
            currentPage: state.entire.currentPage,
            totalCount: state.entire.totalCount,
        }),
        shallowEqual
    )

    // 计算 始、末
    const startCount = currentPage * 20 + 1
    const endCount = (currentPage + 1) * 20

    function pageChangeHandle(page) {
        // 回到顶部
        window.scroll(0, 0)

        dispatch(fetchRoomListAction(page - 1))
    }
    return (
        <PaginationWrapper>
            <div className="page-info">
                <Pagination
                    showSizeChanger={false}
                    current={currentPage + 1}
                    total={totalCount}
                    pageSize={20}
                    onChange={pageChangeHandle}
                />
                <div className="desc">
                    第 {startCount} - {endCount} 个房源，共超过 {totalCount} 个
                </div>
            </div>
        </PaginationWrapper>
    )
})

export default EntirePagination
